<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>x-spreadsheet</title>
<link href="../../s/x-spreadsheet/1.1.7/xspreadsheet.css" rel="stylesheet">
<script src="../../s/x-spreadsheet/1.1.7/locale/zh-cn.js"></script>
<script src="../../s/x-spreadsheet/1.1.7/xspreadsheet.js"></script>
</head>
<body>
	<!-- 在线表格组件 -->
	<div id="x-spreadsheet-demo"></div>
	<script>
    const rows10 = { len: 1000 };
    for (let i = 0; i < 1000; i += 1) {
      rows10[i] = {
        cells: {
          0: { text: 'A-' + i },
          1: { text: 'B-' + i },
          2: { text: 'C-' + i },
          3: { text: 'D-' + i },
          4: { text: 'E-' + i },
          5: { text: 'F-' + i },
        }
      };
    }
    const rows = {
      len: 80,
      1: {
        cells: {
          0: { text: 'testingtesttestetst' },
          2: { text: 'testing' },
        },
      },
      2: {
        cells: {
          0: { text: 'render', style: 0 },
          1: { text: 'Hello' },
          2: { text: 'haha', merge: [1, 1] },
        }
      },
      8: {
        cells: {
          8: { text: 'border test', style: 0 },
        }
      }
    };
    // x_spreadsheet.locale('zh-cn');
    var xs = x_spreadsheet('#x-spreadsheet-demo', {showToolbar: true, showGrid: true})
      .loadData([{
        freeze: 'B3',
        styles: [
          {
            bgcolor: '#f4f5f8',
            textwrap: true,
            color: '#900b09',
            border: {
              top: ['thin', '#0366d6'],
              bottom: ['thin', '#0366d6'],
              right: ['thin', '#0366d6'],
              left: ['thin', '#0366d6'],
            },
          },
        ],
        merges: [
          'C3:D4',
        ],
        cols: {
          len: 10,
          2: { width: 200 },
        },
        rows,
      }, { name: 'sheet-test', rows: rows10 }]).change((cdata) => {
        // console.log(cdata);
        console.log('>>>', xs.getData());
      });

    xs.on('cell-selected', (cell, ri, ci) => {
        console.log('cell:', cell, ', ri:', ri, ', ci:', ci);
      }).on('cell-edited', (text, ri, ci) => {
        console.log('text:', text, ', ri: ', ri, ', ci:', ci);
      });

    setTimeout(() => {
      // xs.loadData([{ rows }]);
      xs.cellText(14, 3, 'cell-text').reRender();
      console.log('cell(8, 8):', xs.cell(8, 8));
      console.log('cellStyle(8, 8):', xs.cellStyle(8, 8));
    }, 5000);
	</script>
</body>
</html>
